<template>
  <view class="container bg-f8">
    <view class="handle-line flex  justify-between align-center">
      <view class="tabs flex align-center">
        <view class="tab-item" :class="{activeTab: activeTab == 0}" @click="changeTab(0)">
          未读
          <view v-if="unread> 0" class="msg-cnt">{{unread}}</view>
        </view>
        <view class="tab-item" :class="{activeTab: activeTab == 1}" @click="changeTab(1)">
          已读
        </view>
      </view>
      <view class="clear-all">
        <image src="../../static/common/clear-all.png" mode="aspectFill" class="icon-44"></image>
      </view>
    </view>
    <scroll-view scroll-y="true" class="scroll-wrap safe-area">
      <view class="msg-item">
        <view class="msg-title line-2">通知1</view>
        <view class="sub-msg flex align-center justify-between">
          <view class="msg-time">12:00</view>
          <view class="msg-more flex align-center">
            <text style="margin-right: 20rpx;">查看详情</text>
            <image src="/static/common/arrow-right.png" class="icon-36" mode="aspectFill"></image>
          </view>
        </view>
      </view>
      <view class="msg-item">
        <view class="msg-title">通知2</view>
        <view class="sub-msg flex align-center justify-between">
          <view class="msg-time">01-02 12:00</view>
          <view class="msg-more flex align-center">
            <text style="margin-right: 20rpx;">查看详情</text>
            <image src="/static/common/arrow-right.png" class="icon-36" mode="aspectFill"></image>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        notificationList: [],
        tabs: ['未读', '已读'],
        activeTab: 0,
        unread: 9
      };
    },
    onLoad() {
      this.getNotificationList();
    },
    methods: {
      getNotificationList() {
        this.notificationList = [{
          title: '通知1',
          content: '通知内容1',
          time: '2021-01-01 12:00:00'
        }, {
          title: '通知2',
          content: '通知内容2',
          time: '2021-01-02 12:00:00'
        }];
      },
      changeTab(index) {
        this.activeTab = index;
      }
    },
  }
</script>

<style lang="scss">
  .handle-line {
    width: 100%;
    height: 88rpx;
    padding: 10rpx 24rpx;

    .tab-item {
      margin-right: 60rpx;
      padding: 10rpx;
      font-size: 30rpx;
      position: relative;
      
      .msg-cnt{
        position: absolute;
        top: -10rpx;
        right: -30rpx;
        min-width: 30rpx;
        max-width: 60rpx;
        height: 30rpx;
        padding: 4rpx;
        background-color: #FF3B30;
        border-radius: 15rpx;
        color: #FFFFFF;
        font-size: 24rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .activeTab {
      color: #7644FF;
      font-weight: bold;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 10%;
        width: 80%;
        height: 4rpx;
        background: #7644FF;
        border-radius: 2rpx;
      }
    }
  }

  .scroll-wrap {
    width: 750rpx;
    height: calc(100vh - 88rpx);
    padding: 24rpx;

    .msg-item {
      width: 100%;
      padding: 24rpx;
      background-color: #FFFFFF;
      margin-bottom: 24rpx;
      border-radius: 12rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .msg-title {
        font-size: 30rpx;
        color: #333333;
      }

      .sub-msg {
        margin-top: 24rpx;
        color: #9E9E9E;
      }
    }
  }
</style>